<template>
  <div id="centreRight2">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span style="color: #5cd9e8;">
          <icon name="align-left" />
        </span>
        <span class="fs-xl text mx-2">超长发电次数分析</span>
      </div>
      <div class="d-flex jc-center body-box" style="margin-top: 0;">
        <dv-capsule-chart :config="config" style="width: 100%; height: 7.5rem;" />
        <!-- ---------------------------------------- -->
        <div id="radarbox" style="margin-top: 0.6rem; width: 100%; height: 12.5rem;" />
      </div>
    </div>
  </div>
</template>
<script>
//import centreRight2Chart1 from "@/components/echart/centerRight/centerRightChart";

export default {
    data() {
        return {
            config: {
                data: [
                    {
                        name: "宁明",
                        value: 167
                    },
                    {
                        name: "江州",
                        value: 123
                    },
                    {
                        name: "扶绥",
                        value: 67
                    },
                    {
                        name: "大新",
                        value: 55
                    },
                    {
                        name: "天等",
                        value: 98
                    }
                ]
            },
            dataBJ: [
                [94, 69, 114, 2.08, 73, 39, 22],
                [99, 73, 110, 2.43, 76, 48, 23],
                [31, 12, 30, 0.5, 32, 16, 24],
                [42, 27, 43, 1, 53, 22, 25],
                [154, 117, 157, 3.05, 92, 58, 26],
                [234, 185, 230, 4.09, 123, 69, 27],
                [160, 120, 186, 2.77, 91, 50, 28]
            ],
            dataGZ: [
                [84, 94, 140, 2.238, 68, 18, 22],
                [93, 77, 104, 1.165, 53, 7, 23],
                [99, 130, 227, 3.97, 55, 15, 24],
                [146, 84, 139, 1.094, 40, 17, 25],
                [113, 108, 137, 1.481, 48, 15, 26],
                [81, 48, 62, 1.619, 26, 3, 27],
                [56, 48, 68, 1.336, 37, 9, 28]
            ],
            dataSH: [
                [91, 45, 125, 0.82, 34, 23, 1],
                [65, 27, 78, 0.86, 45, 29, 2],
                [83, 60, 84, 1.09, 73, 27, 3],
                [109, 81, 121, 1.28, 68, 51, 4],
                [106, 77, 114, 1.07, 55, 51, 5],
                [109, 81, 121, 1.28, 68, 51, 6],
                [106, 77, 114, 1.07, 55, 51, 7]
            ],
            options: {
                radar: {
                    indicator: [
                        { name: "宁明", max: 300 },
                        { name: "江州", max: 250 },
                        { name: "扶绥", max: 300 },
                        { name: "大新", max: 5},
                        { name: "天等", max: 200 },
                        { name: "龙州", max: 100 },
                        { name: "凭祥", max: 100 }
                    ],
                    shape: "circle",
                    splitNumber: 5,
                    name: {
                        textStyle: {
                            color: "rgb(238, 197, 102)"
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: [
                                "rgba(238, 197, 102, 0.1)",
                                "rgba(238, 197, 102, 0.2)",
                                "rgba(238, 197, 102, 0.4)",
                                "rgba(238, 197, 102, 0.6)",
                                "rgba(238, 197, 102, 0.8)",
                                "rgba(238, 197, 102, 1)"
                            ].reverse()
                        }
                    },
                    splitArea: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: "rgba(238, 197, 102, 0.5)"
                        }
                    }
                },
                series: [
                    {
                        name: "北京",
                        type: "radar",
                        lineStyle: {
                            normal: {
                                width: 1,
                                opacity: 0.5
                            }
                        },
                        data: this.dataBJ,
                        symbol: "none",
                        itemStyle: {
                            normal: {
                                color: "#F9713C"
                            }
                        },
                        areaStyle: {
                            normal: {
                                opacity: 0.1
                            }
                        }
                    },
                    {
                        name: "上海",
                        type: "radar",
                        lineStyle: {
                            normal: {
                                color: "#F9713C"
                            }
                        },
                        data: this.dataSH,
                        symbol: "none",
                        itemStyle: {
                            normal: {
                                color: "#B3E4A1"
                            }
                        },
                        areaStyle: {
                            normal: {
                                opacity: 0.05
                            }
                        }
                    },
                    {
                        name: "广州",
                        type: "radar",
                        lineStyle: {
                            normal: {
                                color: "#F9713C"
                            }
                        },
                        data: this.dataGZ,
                        symbol: "none",
                        itemStyle: {
                            normal: {
                                color: "rgb(238, 197, 102)"
                            }
                        },
                        areaStyle: {
                            normal: {
                                opacity: 0.05
                            }
                        }
                    } //end
                ]
            }
        };
    },
    mounted() { this.initEchart(); },
    methods: {
        initEchart() {
            var chartDom = document.getElementById("radarbox");
            var myChart = this.$echarts.init(chartDom);

            myChart.setOption(this.options);
        }
    }
};
</script>

<style lang="scss">
#centreRight2 {
    padding: 0.0625rem;
    height: 22.5rem;
    min-width: 3.75rem;
    border-radius: 0.0625rem;
    .bg-color-black {
        padding: 0.0625rem;
        height: 22.125rem;
        border-radius: 0.125rem;
    }
    .text {
        color: #c3cbde;
    }
    .body-box {
        border-radius: 0.125rem;
        overflow: hidden;
    }
}
</style>